import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:al_pay_flutter/pages/untils/screen.dart';

class LineEcharts extends StatefulWidget {
  @override
  _LineEchartsState createState() => _LineEchartsState();
}

class _LineEchartsState extends State<LineEcharts> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Echarts(
        extraScript: '''
          var base = +new Date(2020, 0, 0);
          var oneDay = 24 * 3600 * 1000;
          var date = [];

          var data = [Math.random() * 100];
          var data2 = [data[0]];
          var data3 = [data[0]];
          for (var i = 1; i < 367; i++) {
            var now = new Date((base += oneDay));
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"));
            data.push(Math.round((Math.random() - 0.48) * 10 + data2[i - 1]+30));
            data2.push(Math.round((Math.random() - 0.44) * 10 + data2[i - 1]));
            data3.push(Math.round((Math.random() - 0.44) * 10 + data2[i - 1]+15));
          }
        ''',
        option: '''
              {
                tooltip: {
                  trigger: "axis",
                  position: function (pt) {
                    return [pt[0], "10%"];
                  },
                },
                grid: {
                    left: '4%',
                    right: '4%',
                    top: '3%',
                    bottom: '4%',
                    containLabel: true
                },
                xAxis: {
                  type: "category",
                  boundaryGap: false,
                  data: date,
                   axisLine: {
            lineStyle: {
                color: '#CDCDCD'
            }
        },
                  axisLabel: {
                    formatter: function (value, index) {
                      var date = new Date(value);
                      var texts = [date.getMonth() + 1, date.getDate()];
                      return texts.join("-");
                    },
                  },
                },
                yAxis: {
                  type: "{value} %",
                  splitLine: {
                    show: true,
                    lineStyle:{
                      type:'dashed'
                    },
                    color:'#CDCDCD',
                  },
                  type: 'value',
                  axisTick: {
                      show: false
                  },
                  axisLine: {
                      show: false,
                      lineStyle: {
                          color: '#DCE2E8'
                      }
                  },
                  axisLabel: {
                      textStyle: {
                          color: '#CDCDCD'
                      }
                  },
                },
                series: [
                  {
                    name: "上证50",
                    type: "line",
                    symbol: "none",
                    sampling: "average",
                    itemStyle: {
                      color: "#2773E0",
                    },
                    data: data,
                     markPoint: {
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
                borderColor: "#fff",
                borderWidth: 2
            },
            label: {
                show: true,
                distance: 10,
                offset: [2, -22],
                textBorderWidth: 0,
                textShadowBlur: 0,
                textShadowColor: 'transparent',
                formatter: param => {
                    return param.dataIndex===1? '{line|}{card|买入}':'{line|}{sale|卖出}'
                },
                rich: {
                    'card': {
                        width: 35,
                        height: 22,
                        backgroundColor: 'red',
                        borderRadius: 5,
                        align: 'center',
                        verticalAlign: 'middle',
                        color: '#fff'
                    },
                    'sale': {
                        width: 35,
                        height: 22,
                        backgroundColor: '#2773E0',
                        borderRadius: 5,
                        align: 'center',
                        verticalAlign: 'middle',
                        color: '#fff'
                    },
                    'line': {
                        color: 'white'
                    }
                }
            },
            data: [{
                type: 'max',
                itemStyle: {
                    color: '#2773E0',
                    shadowBlur: 0
                },
                label: {
                    color: 'black'
                }
            }, {
                type: 'min',
                itemStyle: {
                    color: '#f26b09',
                    shadowBlur: 0
                },
                label: {
                    color: 'black'
                }
            }, ]
        },
                  },
                  {
                    name: "当前基金",
                    type: "line",
                    symbol: "none",
                    lineStyle: {
                        normal: {
                            width: 1,
                        }
                    },
                    sampling: "average",
                    itemStyle: {
                      color: "#71CEE8",
                    },
                    data: data2,
                  },
                  {
                    name: "深证50指数",
                    type: "line",
                    symbol: "none",
                    sampling: "average",
                    lineStyle: {
                        normal: {
                            width: 1,
                        }
                    },
                    itemStyle: {
                      color: "#FFE1A3",
                    },
                    data: data3,
                  },
                ],
              } 
                  ''',
      ),
      width: 750.w,
      height: 550.h,
    );
  }
}
